<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div class="top">
					<h3>基础设置</h3>
				</div>
				<el-form :model="formData" label-width="auto" style="max-width: 600px;margin-left: 100px;">
					<el-form-item label="是否启用" :model="formData" >
						  <el-radio-group v-model="formData.confStatus">
							<el-radio :value="0">是</el-radio>
							<el-radio :value="1">否</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="结算周期类型" :model="formData" >
						  <el-radio-group v-model="formData.cycle" >
							<el-radio :value="0">月度</el-radio>
							<el-radio :value="1">季度</el-radio>
							<el-radio :value="2">年度</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="结算日期" :model="formData" >
						<div>
							<el-date-picker
								v-model="formData.confTime"
								type="date"
								placeholder="请选择日期"
								:size="size"
							/>
							<p style="color: #939393;">当结算日期大于当月总天数的话则视为在当月最后一天执行</p>
						</div>
					</el-form-item>
					<el-form-item label="奖励发放方式" :model="formData" >
						  <el-radio-group v-model="formData.confMethod">
							<el-radio :value="0">手动发放</el-radio>
							<el-radio :value="1">自动发放</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="排名指标" :model="formData" >
						<el-checkbox value="Online activities" name="type" v-model="isChecked">
							销售额
						</el-checkbox>
						<el-input type="number" v-model="formData.confBasic" :disabled="!isChecked" style="margin-left: 15px;width: 100px;"/>元  
					</el-form-item>
					<el-form-item label="规则奖励">
						<div>
							<div v-for="(reward, index) in rewards" :key="index" style="margin-bottom: 20px;">
								<div style="width: 500px;border-bottom: 1px solid #ccc;display: flex;justify-content: space-between;">
									<span >{{index+1}}阶奖励</span>
									<a style="color: #0044ce;" @click="delRewards" v-show="rewards.length>1">删除</a>
								</div>
								<div style="margin: 5px 20px;">
									奖励指标：前<el-input type="number" min="0" v-model.number="rewards[index].ruleRange"  style="margin-left: 5px;width: 100px;"/>名
								</div>
								<div style="margin: 5px 20px;">
									奖励内容：返<el-input type="number" min="0" v-model.number="rewards[index].ruleMoney"  style="margin-left: 5px;width: 100px;"/>元
								</div>
							</div>  
							<el-button @click="addNewReward" type="primary">增加新规则奖励</el-button> 
							<!-- <el-button @click="output">确定</el-button> -->
						</div>
						
					</el-form-item>
					<el-form-item >
						<div style="margin: 0 auto;margin-top:20px;">
							<el-button  @click="Save" type="primary">保存</el-button>
						</div>
					</el-form-item>
				</el-form>
			</el-main>
	    </el-container>
	</div>
</template>

<script setup>
	import Header from "@/components/Header.vue"
	import {reactive,ref,onMounted} from 'vue';
	import {AddReward} from "@/api"
	import { ElMessage, } from 'element-plus'
	const isChecked=ref(false);
	const value1=ref("")
	// 点击增加规则奖励
	const rewards=ref([
		{
			ruleRange: 1, 
			ruleMoney: 100, 
		},
	])
	const addNewReward=()=>{
		// console.log("111")
		const newReward = {  
		    ruleRange: 2, 
		    ruleMoney: 200, 
		};
		rewards.value.push(newReward);  
	}
	
	// 点击确认
	// const output=()=>{
	// 	console.log("rewards",rewards)
	// }
	// 点击删除
	const delRewards=()=>{
		rewards.value.pop()
	}
	let formData = reactive({
		siteId:1,
		confStatus:0,
		cycle:0,
		confTime:"2024-05-29",
		confMethod:0,
		confBasic:1,
		rewardArr:[],
	})
	const Save=async()=>{
		formData.rewardArr.value=rewards
		let res=await AddReward(formData)
		// console.log(res,formData)
		// ElMessage({
		//     message:res,
		//     // type: 'success',
		// })
	}
</script>


<style  lang="less" scoped>
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.el-input{
				width:200px;
			}
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
		}
	}
	
	.active {
	  border: 1px solid red;
	}

	.selected{
		border:1px solid blue;
	}
	
	:deep(.selectedStyle){
		border: 1px solid blue !important;
	}
</style>
